<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <script src='./lib/vue.js'></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
    <div id='app'>
        <router-link to="/user/add">添加用户</router-link>
        <router-link to="/user/edit">编辑用户</router-link>
        <router-link :to="{ name:'user',params:{id:'delete'} }">删除用户</router-link>
        <router-link to="/login">登录</router-link>
        <router-view></router-view>
    </div>
    <script>
        var User = {
            props:["uname","age","id"],
            template:`
                <div>
                    <h1>用户管理----{{id}}----{{uname}}----{{age}}</h1>
            <button @click='goPage'>登录页面</button>
                </div>
            `,
            methods:{
                goPage() {
                    this.$router.push("/login")
                }
            }
        }
        var Login = {
            template:`<div>
                <h1>登录页面</h1>
                <button @click="goBack">返回用户读哪里页面</button>
            </div>`,
            methods:{
                goBack(){
                    this.$router.go(-1)
                }
            }
        }



        var router = new VueRouter({
            routes:[
                { path: "/", redirect: "/user" },
                { 
                    name:"user",
                    path:"/user/:id",
                    component: User,
                    props:route=>({
                        uname:"zs",
                        age:20,
                        id: route.params.id
                    })
                },
                { path: "/login", component: Login }
            ]
        })
        var vm = new Vue({
            el:'#app',
            data:{
 
            },
            methods: {
               
            },
            router
        });
    </script>
</body>
</html>